<template>
  <div>
    <div class='flex justify-between'>
      <div class='back' style='cursor: pointer' @click='()=>{$router.go(-1)}'>
        <i class='el-icon-arrow-left' /> {{ $t('common.back') }}
      </div>
    </div>
    <el-card
       
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.operatorName"
            maxlength="32"
            :placeholder="$t('operator.name')"
            clearable
            @blur="() => (dataForm.operatorName = dataForm.operatorName.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.methodCode"
            :placeholder="$t('statistic.statType')"
            clearable
          >
            <el-option
              v-for="item in statisticTypeList"
              :key="item"
              :value="item"
              :label="$t('contract_statistic.' + item)"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.status"
            :placeholder="$t('statistic.status')"
            clearable
          >
            <el-option :value="0" :label="$t('statistic.flyiot_data_status.0')" />
            <el-option :value="1" :label="$t('statistic.flyiot_data_status.1')" />
            <el-option :value="2" :label="$t('statistic.flyiot_data_status.2')" />
            <el-option :value="3" :label="$t('statistic.flyiot_data_status.3')" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="w-8"
            @click="getDataList(month)"
          >
            <svg-icon icon-class="search"/>
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe>
        <el-table-column
          prop="statisticMonth"
          :label="$t('common.month')"
          width="80"
        />
        <el-table-column
          prop="characterName"
          :label="$t('operator.name')"
        />
        <el-table-column
          prop='methodCode'
          :label="$t('statistic.statType')"
        >
          <template v-slot="scope">
            {{ $t('contract_statistic.' + scope.row.methodCode) }}
          </template>
        </el-table-column>
        <el-table-column
          prop='recordCount'
          :label="$t('statistic.statValue')"
        />
        <el-table-column
          prop="status"
          :label="$t('statistic.status')"
        >
          <template v-slot="scope">
            {{ $t('statistic.flyiot_data_status.' + scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="creTime"
          :label="$t('common.create_time')"
        >
          <template v-slot="scope">
            {{ dateTimeFilter( scope.row.creTime ) }}
          </template>
        </el-table-column>

        <el-table-column
          width="75px"
        >
          <template v-slot="scope">
            <el-dropdown class="align-middle" trigger="click">
            <el-button text class="w-8">
              <svg-icon icon-class="MoreFilled" />
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="downloadDetailFile(scope.row)">
                  <svg-icon icon-class="Download" />
                  {{ $t('common.detail') }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
            <!-- <el-tooltip
              class="item"
              effect="dark"
              :content="$t('common.detail')"
              placement="top"
            >
              <el-button
                v-show="scope.row.fileDirectory"
                type="text"
                style="color: #8c939d"
                icon='el-icon-download'
                @click="downloadDetailFile(scope.row)"
              />
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

</template>
<script>
import { formatDate } from '@/utils/formatDate'
import { timeFilter, dateFilter, dateTimeFilter } from '@/filters/index'
import {
  getIotMonthDetail
} from '@/api/statistic-operator'
import axios from 'axios'
import { getToken } from '@/utils/auth'
import store from '@/store'
export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      statisticTypeList: [],
      dataForm: {
        operatorName: '',
        methodCode: ''
      },
      dataList: [],
      rows: 0,
      dataListLoading: false,
      platCode: 'FLYIOT',
      month: ''
    }
  },
  computed: {
  },
  mounted() {
    if (this.$route.query.month) {
      this.month = this.$route.query.month
      this.getStatTypes()
      this.getDataList(this.$route.query.month)
    } else {
      this.$router.go(-1)
    }
  },
  methods: {
    timeFilter,
    dateFilter,
    dateTimeFilter,
    getStatTypes() {
      var statObj = this.$t('contract_statistic')
      const statTyeList = Object.keys(statObj)
      statTyeList.forEach(item => {
        if (item.startsWith(this.platCode)) {
          this.statisticTypeList.push(item)
        }
      })
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.getDataList(this.month)
    },
    // 获取数据列表
    getDataList(month) {
      this.dataListLoading = true
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: this.dataForm.status,
        characterName: this.dataForm.operatorName,
        methodCode: this.dataForm.methodCode
      }
      getIotMonthDetail(month, params).then(res => {
        console.log(res)
        this.dataList = res.data
        this.rows = res.rows
        this.dataListLoading = false
      })
    },
    formatDate(cellValue, fmt) {
      cellValue = new Date(cellValue).valueOf()
      return formatDate(cellValue, fmt)
    },
    downloadDetailFile(row) {
      this.downLoad(
        import.meta.env.VITE_APP_BASE_API +
        '/online/iot/admin/flycare/statistic/id/' + row.flycareStatisticId,
        row.fileName,
        {})
    },
    downLoad(url, fileName, params) {
      axios({
        method: 'get',
        url: url,
        responseType: 'blob',
        headers: {
          'WEB-TOKEN': getToken(),
          LANG:
          // eslint-disable-next-line no-undef
            localStorage.getItem(store.state.user.keys.storage.lang) || 'en-US'
        },
        params: params
      }).then(({ data }) => {
        if (data) {
          var url = window.URL.createObjectURL(data)
          var a = document.createElement('a')
          a.href = url
          a.download = fileName
          a.click()
        } else {
          this.$message.error('Download error')
        }
      }).catch(this.$confirmError)
    }
  }
}
</script>
